<template>
	<view class="y-flex mt-20" :class="(enableScroll || cellColumn == 'auto') ? 'mr-20 pt-10 pb-10 pl-20 pr-20' : ''" :style="{
		'background-color': skinColor.color_gap_1,
		'border-radius': _pixelunit(cellBorderRadius)
	}" @tap="handleTap">
		<com-text class="y-flex-1" :size="cellTitleSize" :lines="cellTitleLines" :color="titleColor" :value="item.title"></com-text>
	</view>
</template>

<script>
	import { pixelunit } from '@/assets/js/util.js'
	export default {
		inject: ['getSkinColor', 'navigate'],
		props: {
			item: {
				type: Object,
				default () {
					return new Object
				}
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			titleColor () {
				return this.skinColor.color_1
			},
			textColor () {
				return this.skinColor.color_3
			},
			subtextColor () {
				return this.skinColor.color_5
			},
			cellTitleLines () {
				return this.options.cellTitleLines || 1
			},
			cellTitleSize () {
				return this.options.cellTitleSize || 24
			},
			enableScroll () {
				return this.options.enableScroll || false
			},
			cellBorderRadius () {
				return this.options.cellBorderRadius || 10
			},
			cellColumn () {
				return this.options.cellColumn || 'auto'
			}
		},
		methods: {
			_pixelunit (size) {
				return pixelunit(size)
			},
			handleTap () {
				this.navigate(this.item.url)
			}
		}
	}
</script>

<style>
</style>